<!DOCTYPE html>
<html lang="en">
<head>
    <title>增删改查表格与图表</title>
    <style>
        h1 { 
            text-align: center; 
        }
        table{
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th,td{
            border: 1px solid rgb(28, 172, 191);
            padding: 8px;
            text-align: center;
        }
        th { 
            background-color: #ad3083; 
        }
        #plotlyChart { 
            margin-top: 22px; 
            text-align: center; 
        }
    </style>
</head>
<body>
    <h1>学生信息表格</h1>
    <button onclick="addRow()">增加</button>
    <table id="table">
        <tr>
            <th>姓名</th> <th>年龄</th> <th>操作</th>
        </tr>
    </table>
    <div id="plotlyChart"></div>   
    <script src="./plotly-latest.min.js"></script>
    <script>
        var tableData = [
            { name: '老吕', age: 22 },
            { name: '老张', age: 45 },
            { name: '老王', age: 55 },
            { name: '老西', age: 25 }
        ];
        var table = document.getElementById('table');var plotlyChart = document.getElementById('plotlyChart');
        function renderTable() {
            table.innerHTML = `
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            `;
            
            tableData.forEach((data, index) => {
                var row = table.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                
                cell1.innerHTML = data.name;
                cell2.innerHTML = data.age;
                cell3.innerHTML = `
                    <button onclick="editRow(${index})">编辑</button>
                    <button onclick="deleteRow(${index})">删除</button>
                `;
            });

            updatePlotlyChart(); 
        }

        function addRow() {
            var name = prompt('请输入姓名');
            var age = prompt('请输入年龄');
            tableData.push({ name, age });
            renderTable();
        }

        function editRow(index) {
            var newName = prompt('请输入新姓名');
            var newAge = prompt('请输入新年龄');
            tableData[index] = { name: newName, age: newAge };
            renderTable();
        }

        function deleteRow(index) {
            tableData.splice(index, 1);
            renderTable();
        }

        function updatePlotlyChart() {
            var data = [{
                x: tableData.map((data) => data.name),
                y: tableData.map((data) => data.age),
                type: 'bar'
            }];
            
            var layout = {
                title: '学生信息图表'
            };
            
            Plotly.newPlot('plotlyChart', data, layout);
        }

        renderTable(); 
    </script>
</body>
</html>
